<html>    
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{
                font-size:10px;
            }
            table{border-right:2px solid black;border-bottom:2px solid black}
            table td{border-left:2px solid black;border-top:2px solid black}
            span{
                color:blue;
            }
            .c14{
                font-size:14px;
            }
            .c18{
                font-size:18px;
            }
            .c10{
                font-size:10px;
            }
            .left{
                float:left;
            }
            .s4{
                float:left;
                width:40px;
                margin-left:12px;
            }
            .bl{
                color:black;
            }
            .ta{
                height:70px;
            }
            .red{
                color:red;
            }
            .h13{
                min-height:60px;
            }
            .h45{
                min-height:45px;
            }
            .h60{
                height:60px;
            }
            @media print {
                .Noprn{ display:none;}
            }
        </style>
        <script src="./src/js/jquery-1.7.2.min.js"></script>
    </head>
    <body>
        <table width="900" border="0" cellspacing="0" cellpadding="0" style="margin:auto">
                <tr class="t1">
                    <td style="width:216px;">
                        <div style="height:45px;">
                        <span style="font-size:11px;">Reefsr&nbsp;Temperature&nbsp;Required&nbsp;&nbsp;冷藏温度</span>
                        <div><input style="width:195px;"></div>
                        </div>
                    </td>
                    <td colspan="6" rowspan="3" width="630">
                        <div style="float: left;margin-top:-30px;padding-left:20px;">
                            <div> <span class="c18" style="padding-left:25px;">CONTAINER LOAD PLAN</span></div> <div ><span class="c18">装&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单</span></div>
                        </div>
                        <div style="float: left;margin-top:15px;margin-top:-25px;margin-left:50px;">
                            <div ><span class="c14" >CHINA MAEINE SHIPPING AGENCY</span></div>
                            <div><span class="c14">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SHANGHAI COMPANY</span></div>
                        </div>
                    </td>
                </tr>
                <tr class="t2">
                    <td>
                        <div style='width:216px;background:pink;line-height: 12px;'>
                            <div><span style="padding-left:35px;" class="c10">Class</span><span class="c10" style="padding-left:55px;">IMDGPag</span></div>
                            <div><span>e</span><span class="c10" style="margin-left:64px;">UN No.</span><span class="c10" style="margin-left:60px;">Flashpoint</span></div>
                            <div><span class="c10" style="padding-left:35px;">等级</span><span class="c10" style="padding-left:85px;">危规页</span></div>
                            <div><span class="c10">码</span><span class="c10" style="margin-left:55px;">联合国编号</span><span class="c10" style="margin-left:88px;">闪</span></div>
                            <div><span class="c10">点</span></div>
                        </div>
                    </td>
                </tr>
                <tr class="t3">
                    <td>
                        <div><input type="text" class="s4"></div>
                        <div><input type="text" class="s4"/></div>
                        <div><input type="text" class="s4"/></div>
                        <div><input type="text" class="s4"/></div>
                    </td>
                </tr>
                <tr class="t4">
                    <td>
                        <div style="background:red;" class="ta">
                            <div><span>Ship's Name/Voy No.</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;船名/航次</span></div>
                            <div><span class='bl'>CCL NINGBO</span>&nbsp;&nbsp;<span class="bl">v.1723E</span ></div>
                        </div>
                    </td>
                    <td style="width:134px;">
                        <div class="ta">
                            <div><span>Port&nbsp;&nbsp;&nbsp;of&nbsp;&nbsp;Loading</span></div>
                            <div><span>装货</span></div>
                            <div><input type="text" style="text-align: center;width:115px;"/></div>
                        </div>
                    </td>
                    <td style="width:95px;">
                        <div class="ta">
                            <div style="width:90px">
                                <div><span>Port of Dischan</span></div>
                                <div><span>ge</span></div>    
                            </div>
                            <div><span>卸港</sapn></div>
                            <div>JPOSA</div>
                        </div>
                    </td>
                    <td style="width:90px;">
                        <div class="ta">
                            <span>Place of Deliv</span>
                            <span>ery</span>
                            <div><span>交货地</span></div>
                            <div style="width:90px;word-wrap:break-word;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OSAKA,JAPAN</div>
                        </div>
                    </td>
                    <td colspan="3" style="width:355px;">
                        <div style="width:355px;" class="ta">
                            <span>
                                SHIPPER'S/PACKER'S DECLARATIONS:We hereby declare that the conatin
                                er&nbsp;&nbsp;has&nbsp;&nbsp; been&nbsp;&nbsp; thoroughly&nbsp;&nbsp; cleaned without and evidence of&nbsp;&nbsp; cargoes of
                                previous &nbsp;&nbsp;stipment prior to vanning&nbsp;&nbsp; and&nbsp;&nbsp; cargoes has been&nbsp;&nbsp; properly s
                                tuffed and secured
                            </span>
                        </div>
                    </td>
                </tr>
                <tr class="t5">
                    <td>
                        <div class="h13"><span>Container NO.箱号</span></div>
                    </td>
                    <td>
                        <div class="h13">
                            <div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bill of Lading No.</span></div>
                            <div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提单号</span></div>
                            <div>
                                <div class="Noprn"><div style="float:left;background:green;" id="add">+</div><div style="float:right;background:green;" id="delete">-</div></div>
                            </div>
                        </div>
                        <script>
                            $(function() {
                                $("#add").click(function() {
                                  var tid = parseInt($(".input_box:last").attr("tid")) + 1;
                                  var itme = '<div  class="input_box" tid="' + tid + '" style="padding-top:5px;height:20px;">'+
                                    '<div class="left" style="margin-left:10px;"><input type="text"/></div>'+
                                    '<div class="left" style="margin-left:15px;"><input type="text" style="width:80px;"/></div>'+
                                    '<div class="left" style="margin-left:15px;"><input type="text" style="width:80px;"/></div>'+
                                    '<div class="left" style="margin-left:15px;"><input type="text" style="width:80px;"/></div>'+
                                    '<div class="left" style="margin-left:15px;"><input type="text"/></div>'+
                                '</div>';
                                 var ibem = '<div class="chbox" tid="'+ tid +'">'+
                                    '<div><input type="text" style="width:100px;margin-left:6px;"/></div>'+
                                    '<div><input type="checkbox" style="margin-left:50px;"/></div>'+
                                '</div>';
                                 $("#box").append(itme);
                                 $("#chbox").append(ibem);
                                });
                                $("#delete").click(function() {
                                   var tid = $(".input_box:last").attr("tid");
                                   //alert(tid);
                                   if(tid > 1){
                                    $(".input_box").eq(tid - 1).remove();
                                    $(".chbox").eq(tid - 1).remove();
                                   }
                                });
                            });
                        </script>
                    </td>
                    <td>
                        <div class="h13">
                            <div style="width:100%"><span>Packages&Packing</span></div>
                            <div style="width:100%;"><span>件数驭包装</span></div> 
                        </div>
                    </td>
                    <td>
                        <div class="h13">
                            <div><span>&nbsp;&nbsp;Gross &nbsp; Weight</span></div>
                            <div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;毛重</span></div> 
                        </div>
                    </td>
                    <td style="width:90px;">
                        <div class="h13">
                            <div><span>&nbsp;&nbsp;Measurements</span></div>
                            <div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尺码</span></div>
                        </div>
                    </td>
                    <td>
                        <div class="h13" style="width:140px;">
                            <div><span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Goods Name</span></div>
                            <div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;货名</span></div>
                        </div>
                    </td>
                    <td>
                        <div class="h13">
                            <div><span>&nbsp;&nbsp;&nbsp;&nbsp;Mark&Numbers&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
                            <div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;唛头</span></div>
                            <div style="visibility:hidden;">占位</div>
                            <div><span class="red">&nbsp;&nbsp;&nbsp;√</span><span>&nbsp;&nbsp;&nbsp;&nbsp为双拖柜2信息</span></div>
                        </div>
                    </td>
                </tr>
                <tr class="t6">
                    <td style="height:40px;">
                        <div style="height:40px;"><span>Seai No 封号</span></div></td>
                    <td colspan="6" rowspan="4">
                        <div style="width:682px;min-height:248px;background:red;">
                            <div  style="float:left;width:570px;background:yellowgreen;min-height:100px;">
                                <div id="box">
                                <div class="input_box" tid="1" style="margin-top:5px;height:20px;">
                                    <div class="left" style="margin-left:10px;"><input type="text"/></div>
                                    <div class="left" style="margin-left:15px;"><input type="text" style="width:80px;"/></div>
                                    <div class="left" style="margin-left:15px;"><input type="text" style="width:80px;"/></div>
                                    <div class="left" style="margin-left:15px;"><input type="text" style="width:80px;"/></div>
                                    <div class="left" style="margin-left:15px;"><input type="text"/></div>
                                </div>
                                </div>
                                <div style="clear: both;"></div>
                                <div style="padding-left:120px;padding-top:40px;">RF=</div>
                                <div style="padding-left:120px;padding-top:10px;">OT=</div>
                                <div style="padding-left:120px;padding-top:10px;">FR=</div>
                            </div>
                            <div style="float:left;width:112px;background:gray;min-height:248px;" id="chbox">
                                <div class="chbox" tid="1">
                                    <div><input type="text" style="width:100px;margin-left:6px;"/></div>
                                    <div><input type="checkbox" style="margin-left:50px;"/></div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="t7">
                    <td>
                        <div style="line-height: 10px;">
                            <div><span style="padding-left:30px;">Cont.Size箱</span></div>
                            <div><span>型</span><span style="padding-left:125px;">Cont&nbsp;&nbsp;Type.&nbsp;&nbsp;&nbsp;&nbsp;箱</span></div>
                            <div><span>类</span></div>
                            <div><span style="padding-left:45px;">20'</span><span style="padding-left:40px;">40'</span><span style="padding-left:40px;">4</span></div>
                            <div><span>5'</span><span style="padding-left:60px;">GP=普通箱</span><span style="padding-left:30px;">KT=油罐箱</span></div>
                            <div style="visibility: hidden;">占位</div>
                            <div><span>冷藏箱</span><span style="padding-left:30px;">PF=平板箱</span></div>
                            <div style="visibility: hidden;">占位</div>
                            <div><span>冷藏箱</span><span style="padding-left:25px;">HC=高箱</span></div>
                            <div style="visibility:hidden;">占位</div>
                            <div><span>框架箱</span><span style="padding-left:31px;">挂衣箱</span></div>
                        </div>
                    </td>
                </tr>
                <tr class="t8">
                    <td style="height:50px;">
                        <div style="height:50px;">
                            <div><span>ISO Code For Container Size/Type.</span></div>
                            <div><span>箱型/箱类ISO标准代码</span></div>
                            <div>20GP</div>
                        </div>
                        </td>
                </tr>
                <tr class="t9">
                    <td style="height:40px;">
                        <div style="height:40px;">
                            <div><span>Packer/'s Name/Address</span></div>
                            <div><span>装箱人名称/地址</span></div>
                        </div>
                    </td>
                </tr>
                <tr class="t10">
                    <td>
                        <div style='line-height: 12px;letter-spacing: 1.3px;'>
                         奉化市溪口镇上臂主麦村 (溪口镇往新昌方向15公里) &nbsp;&nbsp;&nbsp;奉化市森田宠物用品有限公司<br/>
                         张厂长// 132522855555
                        </div>
                    </td>
                    <td colspan="4">
                    </td>
                    <td colspan="2">
                        <div style="line-height:12px;">
                        <div style="width:100%;text-align:center;">港区:外二期</div>
                        <div style="visibility: hidden;">2</div>
                        <div style="visibility: hidden;">3</div>
                        <div>客户编号:&nbsp;&nbsp;&nbsp;TCL17SE060015</div>
                        <div>
                    </td>
                </tr>
                <tr class="t11">
                    <td>
                        <div class="h45">
                            <div><span>Packing Date. 装箱日期</span></div> 
                            <div>2017-06-02 8:00</div>
                        </div>
                    </td>
                                        <td>       
                        <div class="h45">
                        <div style="width:100%;text-align: center;"><span>Received By Drayman</span></div>
                        <div style="width:100%;text-align: center;"><span>驾驶员签收及车号</span></div>
                        </div>
                    </td>
                    <td>
                        <div class="h45">
                            <div style="width:100%;text-align: center;"><span>Total Packages</span></div>
                            <div style="width:100%;text-align: center;"><span>总件数</span></div>
                        </div>
                    </td>
                    <td>
                        <div class="h45">
                        <div style="width:100%;text-align: center;"><span>Total Cargo Wt</span></div>
                        <div style="width:100%;text-align: center;"><span>总货重</span></div>
                        </div>
                    </td>

                    <td>
                        <div class="h45">
                            <div style="width:100%;text-align: center;"><span>Total Meas</span></div>
                            <div style="width:100%;text-align: center;"><span>总尺码</span></div>
                            <div style="width:85px;word-wrap:break-word;"></div>
                        </div>
                    </td>
                    <td colspan="2" rowspan="2">
                        <div style="width:100%;height:105px;">
                            <div>
                                <span>Remarks:备注</span>
                            </div>
                            <div style="font-size:12px;">进港前请仔细核对所有信息!有问题及时联系</div>
                            <div><textarea style="width:250px;"></textarea></div>
                        </div>
                    </td>
                </tr>
                <tr class="t12">
                    <td>
                        <div class="h60">
                            <div><span>Packed By.&nbsp;&nbsp;&nbsp;装箱人签名</span></div>
                            <div>2</div>
                        </div>
                    </td>
                    <td colspan="2">
                        <div class="h60">
                            <div style="word-wrap:break-word;letter-spacing:1px;">
                                <span>Recelved &nbsp;By &nbsp;Terminals/Date Of Receip
                                    t</span>
                            </div>
                            <div>
                                <span>码头收箱签收和收箱日期</span>
                            </div>
                            <div>wwwwwwwwwwwwww</div>
                        </div>
                    </td>
                    <td>
                        <div class="h60">
                            <div><span>Cont Tare Wt</span></div>
                            <div><span>集装箱皮重</span></div>
                            <div><input type="text" style="width:70px;margin-left:10px;"/></div>
                        </div>
                    </td>
                    <td>
                        <div class="h60">
                            <div style="word-wrap:break-word;"><span>Cgo/Cont&nbsp;&nbsp;Total
                                    Wt</span>
                            </div>
                            <div>
                                <span>货/箱总重量</span>
                            </div>
                            <div>2222222</div>
                        </div>
                    </td>
                </tr>
        </table>
    </body>
</html>